const toggleBatchBtn = document.querySelector("#toggleBatchBtn"); // 成绩菜单
const scoreUl = document.querySelector("#batch"); // 成绩面板


// 获取班级概况
async function getStudentOverview() {
    const result = await axios({ url: "/student/overview" });
    const { avgAge, avgSalary, proportion, total } = result.data.data;
  
    document.querySelector(".avgAge").innerText = avgAge;
    document.querySelector(".avgSalary").innerText = avgSalary;
    document.querySelector(".proportion").innerText = proportion;
    document.querySelector(".total").innerText = total;
  }
  
  getStudentOverview();
  getStudentList();
  getScoreByBatch()
  // 获取全部学员信息
  async function getStudentList() {
    const result = await axios({ url: "/student/list" });
    // console.log(result);
  
    renderSalary(result.data.data);
  }
  
  // 接收数据 渲染 薪资 折线图
  function renderSalary(studentList) {
    // 姓名数组
    const nameList = studentList.map((item) => item.name);
    // 期望薪资数组
    const salaryList = studentList.map((item) => item.salary);
    // 真实薪资数组
    const trueSalaryList = studentList.map((item) => item.truesalary);
  
    // 融入图表的代码
  
     // 基于准备好的dom，初始化echarts实例
     const myChart = echarts.init(document.querySelector(".line"));

     // 指定图表的配置项和数据
     const option = {
       
 dataZoom: [
 {
   // 滑块开始的位置
   start: 0,
   // 滑块结束位置
   end: 30,
 },
],
 color: ["red", "blue"],
 title: {
   text: '薪资 Salary '
 },
 tooltip: {
   trigger: 'axis'
 },
 legend: {},

 xAxis: {
   type: 'category',
   boundaryGap: false,
   data: nameList
 },
 yAxis: {
   type: 'value',
   
 },
 series: [
   {
     name: '期望薪资',
     type: 'line',
     data: salaryList,
     symbol: "circle",
     smooth: true,
     showSymbol:false
     
   },
   {
     name: '实际薪资',
     type: 'line',
     data: trueSalaryList,
     symbol: "circle",
     smooth: true,
     showSymbol:false
   }
 ]
}
     

     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);
  }
  

  async function getScoreByBatch(batch = 1) {
    const result = await axios ({url:"/score/batch",
    params :{batch},
})
console.log(result);

const {avgScore,group,gt60,gt80,lt60} = result.data.data
   // group   组名
  // avgScore  平均分
  // lt60 小于60分人数
  // gt60 60~80分之间的人数
  // gt80 80以上的人数

   // 融合图表代码
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector(".barChart"));

      const option = {
        grid: {
            // 设置图表距离顶部的距离
            top: 40,
            bottom: 30,
          },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },

        legend: {
          data: ["平均分", "低于60分人数", "60到80分之间", "高于80分人数"],
        },
        xAxis: [
          {
            type: "category",
            data: group,//组名
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "成绩 Score",
            
            max: 100,// 暂定100分，具体业务 看项目要求！！
            
            axisLabel: {
              formatter: "{value} " + "分",
            },
          },
          {
            type: "value",

            
            
            axisLabel: {
              formatter: "{value} " + "人",
            },
          },
        ],
        series: [
          {
            name: "平均分",
            type: "bar",
           
            data: avgScore,
          },
          {
            name: "低于60分人数",
            type: "bar",
            
            data: lt60,
          },
          {
            name: "60到80分之间",
            type: "bar",
            
            data: gt60,
          },
          {
            name: "高于80分人数",
            type: "bar",
            
           
            yAxisIndex: 1,
            data: gt80,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
  }

  // 切换成绩面板
toggleBatchBtn.addEventListener("click", function (e) {
    // classList.toggle("")
    scoreUl.classList.toggle("batch_show");
  });
  
  // 点击成绩 切换显示 柱状图
  scoreUl.addEventListener("click", function (e) {
    if (e.target.nodeName === "A") {
      const batch = e.target.dataset.index;
      getScoreByBatch(batch);
    }
  });